.playwindow{
    display: none;
    width: 790px;
    height: 300px;
    margin:0 auto;
    position: absolute;
    z-index: 100;
}
/*播放器容器*/
.playwindow .playbox{
    background-color: #000;
    width: 770px;
    height: 300px;
    padding: 10px 10px 0 10px;
    position: relative;
}
/*叉

.videobox img{
    width: 30px;
    height: 30px;
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9999;
    border-radius: 0 0 0 15px;
    background-color: rgba(220,220,220,0.5);
}*/
/*.videobox img:hover{
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 0 0 0 15px;
    background-color: rgba(220,220,220,0.5);*/
    /*text-align: center;*/
/* z-index: 9999; */
.videobox .imgchahao{
    width: 30px;
    height: 30px;
    display:block;
    border-radius: 0 0 0 15px;
    background-color: rgba(220,220,220,0.5);
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 999;
}

/*视频悬浮播放/暂停按钮*/
.playwindow .vplay,.playwindow .vpause{
    position: absolute;
    left: 0px;
    top: -20px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.playwindow .vplay b,.playwindow .vpause b{/*圆*/
    display: block;
    color: rgba(0,0,0,0);
    width: 30px;
    height: 30px;
    background-color: currentColor;
    padding: 20px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 20px;
}
.playwindow .vplay:hover b,.playwindow .vpause:hover b{
    color: rgba(255,255,255,0.35);/*半透明*/
}
.playwindow .vplay i::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left:solid 30px currentColor;
    border-top: solid 18px transparent;
    border-bottom: solid 18px transparent;
    margin-left: 5px;
}
.playwindow .vpause i{
    display: flex;
    margin-left: 6px;
}
.playwindow .vpause i::before,.playwindow .vpause i::after{
    content: "";
    display: block;
    width: 6px;
    height: 30px;
    background-color: currentColor;
    border-radius: 1px;
}
.playwindow .vpause i::after{
    margin-left: 6px;
}
/*小窗口模式*/
.playwindow .vsmall{
   /* border:solid 4px rgba(200,200,200,0.5);*/
    border-radius: 4px;
    position: fixed;
    bottom: 40px;
    right: 5px;
    z-index: 100;
}
.imgchahao1{
    display: none;
}
.playwindow .vsmall span{
    right: -10px;
    color: white;
}
.playwindow .vsmall span:hover{
    right: 30px;
    color: rgba(255,0,0,0.5);
    z-index: 10001;
}

/*进度条由两条横线组成，背景线固定不动，进度线长度由js修改*/
.playwindow .progress{    /*背景线*/
    width: 770px;
    height: 3px;
    background-color: #999;
    border-radius: 3px;
    position: relative;
}
.playwindow .progress .now{
    width: 0px;
    height: 3px;
    background-color: crimson;
    border-radius: 3px;
    transition: width 0ms;
    position: absolute;
    top: 0;
    left: 0;
}
/*控件区*/
.playwindow .consoles{
              display: flex;
              justify-content: space-between;
              height: 45px;
              font-size: 13px;
              color: white;
}
.playwindow .group1,.playwindow .group2{
    display: flex;
    padding: 10px;
}
/*各控件容器*/
.playwindow .play,.playwindow .pause,.playwindow .stop,.playwindow .mute{
    width: 25px;
    height: 25px;
    margin-right: 3px;
    position: relative;
}
/*鼠标悬停变色*/
.playwindow .play:hover,.playwindow .pause:hover,.playwindow .stop:hover,.playwindow .mute:hover{
    color: papayawhip;
}
/*播放按钮*/
.playwindow .play i{
    display: block;
    width: 0px;
    height: 0px;
    border-left: solid 12px currentColor;
    border-top: solid 8px transparent;
    border-bottom:solid 8px transparent;
    position: absolute;
    left: 8px;
    top:5px;
}
/*暂停按钮*/
.playwindow .pause i{
    display: flex;
    position: absolute;
    left: 9px;
    top: 6px;
}
.playwindow .pause i::before,.playwindow .pause i::after{
    content: "";
    display: block;
    width: 3px;
    height: 13px;
    background-color: currentColor;
    border-radius: 1px;
}
.playwindow .pause i::after{
    margin-left: 3px;
}
/*时间/时长*/
.playwindow .time{
    line-height: 25px;
    margin: 0 10px;
    color: #FFFFFF;
}
/*静音按钮*/
.playwindow .mute::before{/*三角*/
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-right:solid 10px currentColor;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    position: absolute;
    top: 4px;
    left: 7px;
}
.playwindow .mute::after{/*方框*/
    content: "";
    display: block;
    width: 6px;
    height: 7px;
    background-color: currentColor;
    position: absolute;
    top: 9px;
    left: 7px;
}
.playwindow .muted i::before,.playwindow .muted i::after{/*叉*/
    content: "";
    display: block;
    width: 9px;
    height: 2px;
    background-color: red;
    position: absolute;
    top:12px;
    left: 15px;
    z-index: 10;
}
.playwindow .muted i::before{
    transform: rotate(45deg);
}
.playwindow .muted i::after{
    transform: rotate(-45deg);
}
/*音量条*/
.playwindow .volume{
    width: 60px;
    height: 5px;
    background-color: #ccc;
    border-radius: 4px;
    position: relative;
    margin-top: 9px;
    margin-right: 15px;
    margin-left: -2px;
}
.playwindow .volume .vnow{
    width: 60px;
    height: inherit;
    background-color: red;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
}
.playwindow .volume .slider{
    width: 13px;
    height: 13px;
    background-color: #fff;
    border-radius: 50%;
    border:solid 1px #666;
    position: absolute;
    top: -5px;
    left: 54px;
}
/*全屏*/
.playwindow .fullscreen{
    width: 15px;
    height: 15px;
    background-color: currentColor;
    border-radius: 2px;
    margin: 5px 0 0 10px;
}
.playwindow .fullscreen i{
    display: block;
    width: inherit;
    height: inherit;
    background-color: #000;
    border-radius: 50%;
}